<template>
  <div class="szoneButton">
    <el-button type="primary" plain size='small' style="margin-left:10px" @click="szoneDialogVisible('添加地址')" class="addClickAddress" :id="`dnat-address-${nameType}`">{{$t('添加地址')}}</el-button>
    <el-button type="primary" plain size='small' style="margin-left:10px" @click="szoneDialogVisible('添加地址组')" class="addClickGroup" :id="`dnat-address-group-${nameType}`">{{$t('添加地址组')}}</el-button>
    <el-dialog :close-on-click-modal='false' v-drag :title="$t(title)" append-to-body :v-if="dialogVisible" :visible.sync="dialogVisible" top="20vh" width="470px">
      <div class="dialogContentBox">
        <!-- 添加页面 -->
        <AddrGroupTools ref="child_form" v-if="title === '添加地址组'" @childForm="handleChildFormGroup" />
        <AddrTools ref="child_form" v-if="title === '添加地址'" @childForm="handleChildForm" />
      </div>

      <!-- 弹窗控件 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getChildData" :class="title === '添加地址组' ? 'innerAddSubmitAddressGroup' + nameType : 'innerAddSubmitAddress' + nameType">{{$t('确 定')}}</el-button>
        <el-button @click="closeDialog" :class="title === '添加地址组' ? 'innerAddCloseAddressGroup' + nameType : 'innerAddCloseAddress' + nameType">{{$t('取 消')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addAddrInfo } from '@/api/list/addr'
import { addAddrGroup } from '@/api/list/addr-group'
import AddrGroupTools from '@/components/addrTools/AddrGroupTools'
import AddrTools from '@/components/addrTools/AddrTools'
export default {
  name: 'AddrDialog',
  props: ['nameType'],
  components: {
    AddrGroupTools,
    AddrTools
  },
  data () {
    return {
      dialogVisible: false,
      title: ''
    }
  },
  methods: {
    szoneDialogVisible (val) {
      this.title = val
      this.dialogVisible = true
    },
    getChildData () {
      this.$refs.child_form.sendCommand()
    },
    handleChildFormGroup (data, name) {
      addAddrGroup(data).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('添加成功'))
          this.$emit('commandList', data, this.nameType, name)
          this.closeDialog()
        }
      })
    },
    handleChildForm (data, name) {
      addAddrInfo(data).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('添加成功'))
          this.$emit('commandList', data, this.nameType, name)
          this.closeDialog()
        }
      })
    },
    closeDialog () {
      this.dialogVisible = false
      this.$refs.child_form.closeDialog()
    }
  }
}
</script>
<style lang="scss" scoped>
.szoneButton {
  display: inline;
}

.dialogContentBox {
  max-height: calc(60vh - 184px);
  overflow-y: auto;
}
</style>
